<template>
  <div class="tabs">
    <a @click="setFilter('all')" :class="{ active: store.state.filter === 'all' }"> All</a>
    <a @click="setFilter('finished')" :class="{ active: store.state.filter === 'finished' }">
      finished</a
    >
    <a @click="setFilter('unfinished')" :class="{ active: store.state.filter === 'unfinished' }">
      unfinished</a
    >
  </div>
</template>

<script setup>
import { useStore } from 'vuex';

const store = useStore();
const setFilter = (filter) => {
  store.commit('setFilter', filter);
};
</script>

<style lang="scss" scoped>
.tabs {
  a {
    font-size: 18px;
    padding: 0 10px;
    cursor: pointer;
    &.active {
      font-weight: bold;
      color: blue;
      text-decoration: underline;
    }
  }
}
</style>
